<!--
 * @Author: your name
 * @Date: 2023-08-15 23:07:37
 * @LastEditTime: 2023-08-17 20:37:43
 * @LastEditors: your name
 * @Description: 
-->
<template>
  <div class="screen-center-1">
    <div class="screen-center-1__title">
      <dv-decoration-2 :dur="4" />
      <div class="title__label">项目总数分布图</div>
      <dv-decoration-2 :dur="4" />
    </div>

    <dv-digital-flop :config="config" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 123400,
    };
  },
  computed: {
    config() {
      return {
        number: [this.number],
        content: "{nt}个",
        formatter: this.formatter,
      };
    },
  },
  created() {
    setTimeout(() => {
      this.number = 1234567;
    }, 3000);
  },
  methods: {
    formatter(number) {
      const numbers = number.toString().split("").reverse();
      const segs = [];

      while (numbers.length) segs.push(numbers.splice(0, 3).join(""));

      return segs.join(",").split("").reverse().join("");
    },
  },
};
</script>

<style lang="scss">
.screen-center-1 {
  width: 100%;
  // height: 30%;
  padding: 10vh 1vh 1vh;
  box-sizing: border-box;
  &__title {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 4vh;
    align-items: center;
    & > div:nth-child(1) {
      transform: rotateZ(180deg);
    }
    .dv-decoration-2 {
      width: 20%;
      height: 8px;
    }
    .title__label {
      width: 38%;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
    }
  }
  .dv-digital-flop {
    width: 90%;
    margin: 0 auto;
    height: 6vh;
  }
}
</style>